<div
  local-class="
    row
    {{if @dependency.optional "optional"}}
    {{if this.focused "focused"}}
  "
  data-test-dependency={{@dependency.crate_id}}
  ...attributes
>
  <span local-class="range-lg" data-test-range>
    {{format-req @dependency.req}}
  </span>

  <div local-class="right">
    <div local-class="name-and-metadata">
      <span local-class="range-sm">
        {{format-req @dependency.req}}
      </span>

      <LinkTo
        @route="crate.range"
        @models={{array @dependency.crate_id @dependency.req}}
        local-class="link"
        {{on "focusin" (fn this.setFocused true)}}
        {{on "focusout" (fn this.setFocused false)}}
        data-test-crate-name
      >
        {{@dependency.crate_id}}
      </LinkTo>

      {{#if @dependency.optional}}
        <span local-class="optional-label" data-test-optional>
          optional
        </span>
      {{/if}}

      {{#if this.featuresDescription}}
        <span local-class="features-label" data-test-features>
          {{! extra <span> for better tooltip alignment }}
          <span>
            {{this.featuresDescription}}

            <EmberTooltip>
              <ul local-class="feature-list">
                <li>
                  {{svg-jar (if @dependency.default_features "checkbox" "checkbox-empty")}} default features
                </li>
                {{#each @dependency.features as |feature|}}
                  <li>
                    {{svg-jar "checkbox"}} {{feature}}
                  </li>
                {{/each}}
              </ul>
            </EmberTooltip>
          </span>
        </span>
      {{/if}}
    </div>

    {{#if (or this.description this.loadCrateTask.isRunning)}}
      <div local-class="description" data-test-description>
        {{#if this.loadCrateTask.isRunning}}
          <Placeholder local-class="description-placeholder" data-test-placeholder />
        {{else}}
          {{this.description}}
        {{/if}}
      </div>
    {{/if}}
  </div>
</div>